<!doctype html>

<head>
  <meta charset="utf-8">
  <!-- <link rel="stylesheet" type="text/css" href="demo.css" /> -->
  <title>css3炫酷页面加载动画特效代码 </title>
  <style>
    @-webkit-keyframes ball-triangle-path-1 {
      33% {
        -webkit-transform: translate(25px, -60px);
        transform: translate(25px, -60px);
      }

      66% {
        -webkit-transform: translate(60px, 0px);
        transform: translate(60px, 0px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    @keyframes ball-triangle-path-1 {
      33% {
        -webkit-transform: translate(25px, -60px);
        transform: translate(25px, -60px);
      }

      66% {
        -webkit-transform: translate(60px, 0px);
        transform: translate(60px, 0px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    @-webkit-keyframes ball-triangle-path-2 {
      33% {
        -webkit-transform: translate(25px, 60px);
        transform: translate(25px, 60px);
      }

      66% {
        -webkit-transform: translate(-30px, 60px);
        transform: translate(-30px, 60px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    @keyframes ball-triangle-path-2 {
      33% {
        -webkit-transform: translate(25px, 60px);
        transform: translate(25px, 60px);
      }

      66% {
        -webkit-transform: translate(-30px, 60px);
        transform: translate(-30px, 60px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    @-webkit-keyframes ball-triangle-path-3 {
      33% {
        -webkit-transform: translate(-60px, 0px);
        transform: translate(-60px, 0px);
      }

      66% {
        -webkit-transform: translate(-30px, -60px);
        transform: translate(-30px, -60px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    @keyframes ball-triangle-path-3 {
      33% {
        -webkit-transform: translate(-60px, 0px);
        transform: translate(-60px, 0px);
      }

      66% {
        -webkit-transform: translate(-30px, -60px);
        transform: translate(-30px, -60px);
      }

      100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
      }
    }

    .ball-triangle-path {
      position: relative;
      -webkit-transform: translate(-30px, -30px);
      -ms-transform: translate(-30px, -30px);
      transform: translate(-30px, -30px);
    }

    .ball-triangle-path>div:nth-child(1) {
      -webkit-animation-name: ball-triangle-path-1;
      animation-name: ball-triangle-path-1;
      -webkit-animation-delay: 0;
      animation-delay: 0;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

    .ball-triangle-path>div:nth-child(2) {
      -webkit-animation-name: ball-triangle-path-2;
      animation-name: ball-triangle-path-2;
      -webkit-animation-delay: 0;
      animation-delay: 0;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

    .ball-triangle-path>div:nth-child(3) {
      -webkit-animation-name: ball-triangle-path-3;
      animation-name: ball-triangle-path-3;
      -webkit-animation-delay: 0;
      animation-delay: 0;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

    .ball-triangle-path>div {
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      border: 1px solid rgb(8, 248, 236);
      background: #2aff05
    }

    .ball-triangle-path>div:nth-of-type(1) {
      top: 60px;
    }

    .ball-triangle-path>div:nth-of-type(2) {
      left: 30px;
    }

    .ball-triangle-path>div:nth-of-type(3) {
      top: 60px;
      left: 60px;
    }

    main .loader {
      box-sizing: border-box;
      display: flex;
      flex: 0 1 auto;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 25%;
      max-width: 25%;
      height: 200px;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <main>
      <div class="loader">
        <div class="loader-inner ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
    </div>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('main').className += 'loaded';
    });
  </script>

  
</body>

</html>